import "swiper/swiper-bundle.css";
import { Pagination, Navigation, Thumbs } from "swiper/modules";
import { Swiper, SwiperSlide } from "swiper/vue";
import { computed, inject, toRefs, useModel, onMounted, watch, ref } from "vue";
import { messageType } from "../../config";
import { refDebounced } from "@vueuse/core";
import { asyncComputed, useDebounceFn } from "@vueuse/core";
import { chaCheGetJinWen as getJingWen } from "@/api/jingwen";
import { createLyricSlider } from "../components/Slider/utils";
import { getShijiItemByidsLazyFields } from "@/api/cloudbase-sgbedit";
export default function useController(modelValue, emit, power = ref(1)) {
  const modules = [Pagination, Navigation, Thumbs];
  const sgbList = inject("sgbList");
  const { messageType: messageTypeValue, pageIndex } = toRefs(modelValue.value);

  const padding = computed(() => {
    return 36 * power.value + "px";
  });
  const bgColor = computed(() => {
    return modelValue.value?.bgColor;
  });
  const textAlign = computed(() => {
    switch (messageTypeValue.value) {
      case messageType.ZM:
      case messageType.GP:
        return modelValue.value?.textAlign;
      case messageType.JW:
        return "left";
    }
  });
  const fontSize = computed(() => {
    return `${modelValue.value?.fontSize * power.value}px`;
  });
  const currentData = computed(() => {
    return sgbList.value.find((item) => item._id === modelValue.value?.payload?.value);
  });
  const sliderArr = computed(() => {
    switch (messageTypeValue.value) {
      case messageType.ZM:
      case messageType.GP:
        return createLyricSlider(lyric.value, rowCount.value);
      case messageType.JW:
        return createLyricSlider(jingwen.value, 1);
    }
    return [];
  });
  const rowCount = computed(() => {
    return modelValue.value?.rows || 1;
  });
  const fontColor = computed(() => {
    return modelValue.value?.fontColor;
  });

  const title = computed(() => {
    switch (messageTypeValue.value) {
      case messageType.ZM:
      case messageType.GP:
        return currentData.value?.mulu ? `${currentData.value?.xuhao}.${currentData.value?.mulu}` : "";
      case messageType.JW:
        return modelValue.value?.payload?.value || "";
    }
  });

  const subTitle = computed(() => {
    return currentData.value?.shijiName || "";
  });

  const lineHeight = computed(() => {
    return `${modelValue.value?.lineHeight * power.value}px`;
  });
  /**
   * 异步获取经文
   */
  const jingwen = asyncComputed(
    async () => {
      if (messageTypeValue.value === messageType.JW && modelValue.value?.payload?.value) {
        try {
          const data = await getJingWen(modelValue.value?.payload?.value);
          const rows = data?.data;
          if (Array.isArray(rows)) {
            return rows
              .map((row) => {
                return row.jie + row.data;
              })
              .join("\n");
          }
          return "";
        } catch (error) {
          console.log("请求发生了错误", error);
          return "";
        }
      }
    },
    "",
    {
      shallow: true,
      lazy: true,
    }
  );
  /**
   * 异步获取歌词
   */
  const lyric = asyncComputed(
    async () => {
      if (messageTypeValue.value === messageType.ZM && modelValue.value?.payload?.value) {
        try {
          const res = await getShijiItemByidsLazyFields([modelValue.value?.payload?.value], ["lyric"]);
          console.log("res-->", res);
          let _lyric = "";
          if (Array.isArray(res) && res.length > 0) {
            _lyric = res[0].lyric;
          }

          return _lyric;
        } catch (error) {
          console.log("error-->", error);
          return "";
        }
      }
    },
    "",
    {
      lazy: true,
    }
  );

  const gepuUrl = asyncComputed(
    async () => {
      if (messageTypeValue.value === messageType.GP && modelValue.value?.payload?.value) {
        try {
          const res = await getShijiItemByidsLazyFields([modelValue.value?.payload?.value], ["gepuUrl"]);
          let gepuUrl = "";
          if (Array.isArray(res) && res.length > 0) {
            gepuUrl = res[0].gepuUrl;
          }

          return gepuUrl;
        } catch (error) {
          return "";
        }
      }
    },
    "",
    {
      lazy: true,
    }
  );

  function handleSliderChange(e) {
    if (e.activeIndex === modelValue.value.pageIndex) return;
    if (e.swiper) {
      e.swiper.swiper.slideTo(e.activeIndex);
      return;
    }
    modelValue.value.pageIndex = e.activeIndex;
    emit("change");
  }

  return {
    Swiper,
    SwiperSlide,
    modules,
    jingwen,
    lineHeight,
    subTitle,
    title,
    fontColor,
    rowCount,
    sliderArr,
    currentData,
    fontSize,
    textAlign,
    bgColor,
    pageIndex,
    handleSliderChange,
    padding,
    gepuUrl,
  };
}
